<template>
  <div class="danmaku-box">
    <div class="danmaku-wrap">
      <div class="bpx-player-auxiliary">
        <div class="bui-area">
          <div class="bui-collapse-wrap" style="width: 100%">
            <!--头部部分-->
            <div @click="collapseBody = !collapseBody" class="bui-collapse-header">
              <div class="bui-collapse-arrow">
              <span class="bui-collapse-arrow-text">
                <!--上下箭头图标-->
                <span v-if="!collapseBody" class="iconfont icon-xiangxia el-icon-arrow"></span>
                <span v-if="collapseBody" class="iconfont icon-xiangshang el-icon-arrow"></span>
              </span>
              </div>
              <div class="bpx-player-filter">
                <div class="bui-area">
                  <div class="bui-dropdown-wrap">
                    <span class="bui-dropdown-name">弹幕列表</span>
                    <!--竖三角图标-->
                    <span class="iconfont icon-caidan1"></span>
                  </div>
                </div>
              </div>
            </div>
            <!--主体弹幕部分--><!-- 折叠的内容 -->
            <el-collapse-transition>
              <div v-show="collapseBody" class="bui-collapse-body">
                <div class="bpx-player-wraplist" style="height: 386px">
                  <div class="bpx-player-filter-wrap">
                    <!--列表头部-->
                    <div class="bpx-player-dm-function">
                      <div class="bpx-player-dm-btn-time">时间</div>
                      <div class="bpx-player-dm-btn-dm">弹幕内容</div>
                      <div class="bpx-player-dm-btn-date">发送时间</div>
                    </div>
                    <!--列表内容-->
                    <div class="bpx-player-dm-wrap bui" style="height: 315px;">
                      <div class="small-mode">
                        <ul class="bui-long-list-list">
                          <li v-for="(item,index) in danmukaList" :key="index" style="height: 24px"
                              :class="{changeBg:controllerBg === index}"
                              @mouseenter="cursorMouse = index" @mouseleave="cursorMouse = -1"
                              @click="controllerBg = index">
                            <div class="dm-info-row">
                              <span class="dm-info-time">{{ item.time }}</span>
                              <span class="dm-info-dm" :title="item.talk">{{ item.talk }}</span>
                              <!--默认显示时间-->
                              <span v-if="!item.shield" class="dm-info-date">{{ item.sendTime }}</span>
                              <span v-if="item.shield" class="dm-info-tips">已屏蔽</span>
                              <span v-if="cursorMouse === index && !item.shield" class="dm-info-block-btn"
                                    @click="shieldUserDanmuka(item)">屏蔽用户</span>
                              <span v-if="cursorMouse === index && item.shield" class="dm-info-block-btn"
                                    @click="cancelShieldUserDanmuka(item)">取消屏蔽</span>
                              <span v-if="false" class="dm-info-block-btn">取消屏蔽</span>
                              <span v-if="cursorMouse === index" class="dm-info-report-btn">举报</span>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <!--查看历史弹幕-->
                    <div class="bpx-player-dm-btn-footer">
                      <div class="bpx-player-dm-btn-history">查看历史弹幕</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "danmakuBox",
  components: {},
  data() {
    return {
      danmukaList: [],
      // 控制显示与隐藏
      collapseBody: false,
      cursorMouse: null,
      controllerBg: null,
      shieldUserList: []
    }
  },
  mounted() {
    this.getDanmukaList()
  },
  methods: {
    async getDanmukaList() {
      let danmukaInfo = await this.$util.get("hilihili/danmaku/getDanmakuByVideoId", {videoId: this.$route.params.id})
      if (danmukaInfo.code != 200) {
        return
      }
      let shieldUserList = await this.$util.get("hilihili/danmaku/getShieldDanmukaList", {userId: this.$store.state.userInfo.userId})
      if (shieldUserList.data !== undefined){
        this.$bus.emit("updateShieldUserList", shieldUserList.data)
        this.shieldUserList = shieldUserList.data
      }
      this.danmukaList = danmukaInfo.data
      this.refreshDanmukaList();
    },
    refreshDanmukaList() {

      this.danmukaList.forEach(item=>{
         if (this.shieldUserList.indexOf(item.userId) !== -1){
           item.shield = true
         }else {
           item.shield = false
         }
      })
    },
    shieldUserDanmuka(item) {
      //todo 列表和发送弹幕list 都得删除
      this.shieldUserList.push(item.userId)
      this.$bus.emit("updateShieldUserList", this.shieldUserList)
      this.refreshDanmukaList()
      this.$util.post("hilihili/danmaku/shieldUserDanmuka", {
        userId: this.$store.state.userInfo.userId,
        shieldedUserId: item.userId,
      })
    },
    cancelShieldUserDanmuka(item) {
      const index = this.shieldUserList.indexOf(item.userId)
      if (index != -1){
        this.shieldUserList.splice(index,1);
      }
      this.$bus.emit("updateShieldUserList", this.shieldUserList)
      this.refreshDanmukaList()
      console.log("this.shieldUserList===" + this.shieldUserList)
      this.$util.post("hilihili/danmaku/cancelShieldUserDanmuka", {
        userId: this.$store.state.userInfo.userId,
        shieldedUserId: item.userId,
      })
    }
  }
}
</script>

<style scoped>
/*动态设置<li>背景颜色*/
.changeBg {
  background: rgb(244, 245, 245);
}

/*若弹被幕屏蔽后样式*/
.dm-info-change-color {
  color: #ccd0d7;
}

.danmaku-box {
  position: relative;
  margin: 0 0 20px 0;
}

.danmaku-wrap {
  min-height: 40px;
  background: #F1F2F3;
  border-radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
}

.bpx-player-auxiliary {
  -ms-flex-negative: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  flex-shrink: 0;
  height: 100%;
  position: relative;
  vertical-align: top;
  width: 100%;
}

.bui-area {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: flex-start;
  line-height: normal;
  user-select: none;
  vertical-align: middle;
  width: 100%;
}

.bui-collapse-header {
  border-radius: 6px;
  background: #F1F2F3;
  box-sizing: border-box;
  color: #222;
  cursor: pointer;
  height: 100%;
  position: relative;
  width: 100%;
}

.bui-collapse-arrow {
  bottom: 0;
  height: 14px;
  margin: auto;
  position: absolute;
  right: 16px;
  top: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: flex;
  vertical-align: middle;
}

.bui-collapse-arrow-text {
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 12px;
}

.el-icon-arrow {
  font-size: 10px;
}

.bpx-player-filter {
  font-size: 14px;
  border-radius: 6px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  border: none;
  box-sizing: border-box;
  padding: 0 10px 0 16px;
  position: relative;
  z-index: 2;
  -webkit-box-align: center;
  -webkit-box-pack: start;
  align-items: center;
  justify-content: flex-start;
  vertical-align: middle;
}

/*主体弹幕部分样式*/
.bui-collapse-body {
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}

.bpx-player-filter-wrap {
  height: 100%;
  display: block;
}

.bpx-player-dm-function {
  background-color: #fff;
  display: flex;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.bpx-player-dm-btn-time {
  padding-left: 16px;
  padding-right: 0;
  text-align: left;
  width: 60px;

  border: 0;
  box-sizing: border-box;
  color: #6d757a;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  height: 32px;
  line-height: 32px;
  /*padding: 0 6px;*/
  position: relative;
}

.bpx-player-dm-btn-dm {
  -webkit-box-flex: 1;
  flex: auto;
  text-align: left;

  border: 0;
  box-sizing: border-box;
  color: #6d757a;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  height: 32px;
  line-height: 32px;
  padding: 0 6px;
  position: relative;
}

.bpx-player-dm-btn-date {
  text-align: left;
  width: 88px;

  border: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #6d757a;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  height: 32px;
  line-height: 32px;
  padding: 0 6px;
  position: relative;
}

.bpx-player-dm-wrap {
  background-color: #fff;
  position: relative;
}

.small-mode {
  width: 100%;
  height: 315px;
  overflow-y: auto;
}

.small-mode::-webkit-scrollbar {
  width: 4px;
  background: transparent;
}

.small-mode::-webkit-scrollbar-thumb {
  background: rgb(174, 174, 174);
  border-radius: 50px;
}

.small-mode::-webkit-scrollbar-track {
  background: transparent;
}

.bui {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  vertical-align: middle;
}

.bui-long-list-list {
  box-sizing: border-box;
  cursor: pointer;
  /*list-style-type: none;*/
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.dm-info-row {
  color: #6d757a;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  position: relative;
  user-select: none;
}

.dm-info-time {
  /*color: #ccd0d7;*/
  -webkit-box-flex: 0;
  flex: none;
  overflow: hidden;
  padding-left: 16px;
  position: relative;
  text-align: left;
  width: 66px;
}

.dm-info-dm {
  /*color: #ccd0d7;*/
  -webkit-box-flex: 1;
  flex: auto;
  overflow: hidden;
  pointer-events: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-info-date {
  -webkit-box-flex: 0;
  flex: none;
  overflow: hidden;
  white-space: nowrap;
  width: 88px;
  padding: 0 6px;
}

.dm-info-tips {
  /*color: #ccd0d7;*/
  float: right;
  padding-left: 0;
  padding-right: 22px;
  text-align: right;
  width: 88px;
}

.dm-info-block-btn {
  font-size: 12px;
  background: #fff;
  border: 1px solid #00a1d6;
  border-radius: 2px;
  color: #00a1d6;
  height: 20px;
  line-height: 20px;
  margin-left: 10px;
  pointer-events: auto;
  position: absolute;
  right: 10px;
  text-align: center;
  top: 1px;
  z-index: 5;
  width: 70px;
}

.dm-info-report-btn {
  font-size: 12px;
  background: #fff;
  border: 1px solid #00a1d6;
  border-radius: 2px;
  color: #00a1d6;
  height: 20px;
  line-height: 20px;
  margin-left: 10px;
  pointer-events: auto;
  position: absolute;
  right: 90px;
  text-align: center;
  top: 1px;
  z-index: 5;
  width: 70px;
}

.dm-info-report-btn:hover, .dm-info-block-btn:hover {
  background: #00a1d6;
  color: #ffffff;
}

.bpx-player-dm-btn-footer {
  cursor: pointer;
  height: 31px;
  margin-top: 8px;
  position: relative;
  width: auto;
  z-index: 10;
}

.bpx-player-dm-btn-history {
  background-color: #f4f4f4;
  color: #505050;
  font-size: 12px;
  cursor: pointer;
  height: 31px;
  line-height: 31px;
  text-align: center;
  width: 100%;
  border-radius: 6px;
}
</style>
